<template>
	<div class="base-content">
		<div class="container">
			<div class="plate"></div>
			<div class="cup">
				<div class="top">
					<div class="vapour">
						<span style="--i:1;"></span>
						<span style="--i:3;"></span>
						<span style="--i:16;"></span>
						<span style="--i:5;"></span>
						<span style="--i:13;"></span>
						<span style="--i:20;"></span>
						<span style="--i:6;"></span>
						<span style="--i:7;"></span>
						<span style="--i:10;"></span>
						<span style="--i:8;"></span>
						<span style="--i:17;"></span>
						<span style="--i:11;"></span>
						<span style="--i:12;"></span>
						<span style="--i:14;"></span>
						<span style="--i:2;"></span>
						<span style="--i:9;"></span>
						<span style="--i:15;"></span>
						<span style="--i:4;"></span>
						<span style="--i:19;"></span>
						<span style="--i:18;"></span>
					</div>
					<div class="circle">
						<div class="tea"></div>
					</div>
				</div>
				<div class="teabag">
					<div class="teabag-line"></div>
					<img src="@/assets/logo.png" class="teabag-logo" />
				</div>
				<div class="handle"></div>
			</div>
		</div>

		<el-card class="login-content" style="width: 400px;" shadow="hover">
			<div><img src="@/assets/logo.png" class="logo" /></div>
			<el-form ref="formRef" :model="form" label-width="4em">
				<el-form-item label="账号">
					<el-input v-model="form.account"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.pwd" show-password></el-input>
				</el-form-item>
			</el-form>
			<el-button style="width: 100%;" type="primary" @click="login" :loading="btnLoading">登录</el-button>
		</el-card>
	</div>
</template>

<script>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		useRouter
	} from 'vue-router'
	export default {
		name: 'Login',
		setup() {
			const store = useStore()
			const router = useRouter()
			const form = reactive({
				account: 'admin',
				pwd: 'admin'
			})
			const btnLoading = ref(false)
			const login = () => {
				btnLoading.value = true
				store.commit('setTabs', [])
				store.commit('user/setUser', {
					id: '1',
					name: 'Admin',
					avatar: 'https://xindeas.gitee.io/my-wh/user.gif'
				})
				router.push('/')
			}
			return {
				form,
				btnLoading,
				login
			}
		}
	}
</script>

<style scoped>
	.base-content {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		background: #628B60;
	}

	.login-content {
		margin: 0 2em;
	}

	.logo {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-bottom: 1em;
	}

	.container {
		position: relative;
		height: 100%;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cup {
		position: relative;
		width: 280px;
		height: 150px;
		background: linear-gradient(to right, #f9f9f9, #d9d9d9);
		border-bottom-left-radius: 45%;
		border-bottom-right-radius: 45%;
	}

	.teabag-line {
		position: absolute;
		height: 45px;
		width: 5px;
		top: -40px;
		left: 25px;
		border-left: 2px solid #dcdcdc;
		border-top: 2px solid #dcdcdc;
		border-radius: 50% 0 0 50%;
	}

	.teabag {
		position: absolute;
		bottom: 40px;
		left: 40px;
		height: 50px;
		width: 50px;
		background: linear-gradient(#EDCB8D, #C5A365, #c57e65);
		transform: rotateZ(0deg) rotateY(0deg);
		box-shadow: 20px 30px 35px rgba(0, 0, 0, .2);
		animation: tbag-ani 2s linear alternate infinite;
		border-right: 2px solid #9D563D;
		border-bottom: 2px solid #9D563D;
	}

	@keyframes tbag-ani {
		0% {
			transform: rotateZ(0deg) rotateY(0deg);
			box-shadow: 10px 10px 35px rgba(0, 0, 0, .4);
		}

		100% {
			left: 20px;
			bottom: 43px;
			transform: rotateZ(15deg) rotateY(30deg);
			box-shadow: 20px 30px 35px rgba(0, 0, 0, .2);
		}
	}

	.teabag-logo {
		position: absolute;
		bottom: 5px;
		left: 5px;
		width: 40px;
		height: 40px;
	}

	.top {
		position: absolute;
		top: -30px;
		height: 60px;
		width: 100%;
		background: linear-gradient(to right, #f9f9f9, #d9d9d9);
		border-radius: 50%;
	}

	.circle {
		position: absolute;
		top: 5px;
		left: 10px;
		height: 50px;
		width: calc(100% - 20px);
		background: linear-gradient(to left, #f9f9f9, #d9d9d9);
		border-radius: 50%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tea {
		position: absolute;
		top: 20px;
		left: 0;
		height: 100%;
		width: 100%;
		background: radial-gradient(#EDCB8D, #C5A365, #c57e65);
		border-radius: 50%;
	}

	.handle {
		position: absolute;
		top: 10px;
		right: -35px;
		height: 60px;
		width: 60px;
		border: 20px solid #dcdcdc;
		border-left: 20px solid transparent;
		border-bottom: 20px solid transparent;
		transform: rotate(42deg);
		border-radius: 50%;
	}

	.plate {
		position: absolute;
		width: 450px;
		height: 120px;
		bottom: calc(50% - 115px);
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #f9f9f9, #e7e7e7);
		border-radius: 50%;
		box-shadow: 35px 35px 35px rgba(0, 0, 0, .2);
	}

	.plate::before {
		content: '';
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 10px;
		border-radius: 50%;
		background: linear-gradient(to left, #f9f9f9, #e7e7e7);
	}

	.plate::after {
		content: '';
		position: absolute;
		top: 40px;
		bottom: 20px;
		left: 30px;
		right: 30px;
		border-radius: 50%;
		background: radial-gradient(rgba(0, 0, 0, .2) 25%, transparent, transparent);
	}

	.vapour {
		position: relative;
		display: flex;
		z-index: 1;
		padding: 0 20px;
	}

	.vapour span {
		position: relative;
		bottom: 40px;
		display: block;
		margin: 0 1px 50px;
		min-width: 8px;
		height: 80px;
		background: #ffffff;
		border-radius: 50%;
		animation: animate 5s linear infinite;
		opacity: 0;
		filter: blur(8px);
		animation-delay: calc(var(--i) * 0.5s);
	}

	@keyframes animate {
		0% {
			transform: translateY(0) scaleX(1);
			opacity: 0;
		}

		15% {
			opacity: 1;
		}

		50% {
			transform: translateY(-150px) scaleX(5);
		}

		95% {
			opacity: 0;
		}

		100% {
			transform: translateY(-300px) scaleX(10);
		}
	}
</style>
